<template>
    <div class="diary-card">
        <!-- 完整卡片 -->
        <div class="card" v-for="item in cardItems" :key="item.d_id" @click="goDailyDetail(item)">
            <!-- 卡片顶部 -->
            <div class="card-word">
                <div class="card-word-left">
                    <!-- 头像 -->
                    <img class="u-pic" src="@/assets/img/jiyang/cat3.jpg" alt="">
                    <!-- 伴宠人员姓名 -->
                    <span class="u-name">{{ item.d_man_name }}</span>
                </div>
                <!-- 发布城市 -->
                <span class="u-city">{{ item.d_city }}</span>
            </div>
            <div class="card-img">
                <!-- 文字 -->
                <p>{{ item.d_detail }}</p>
                <!-- 照片 -->
                <img :src="item.d_img" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cardItems: [],   // 存放日志列表
        }
    },
    methods: {
        // 获取三条最新日志信息
        getDairyData() {
            this.http.get(this.$api.getThreeDairy)
                .then(res => {
                    if (res.data.code == 200) {
                        console.log('返回最新日志', res);
                        this.cardItems = res?.data.data
                    }
                })
        },
        goDailyDetail(item) {
            this.$router.push({
                path: '/dailydetail',
                query: {
                    d_id: item.d_id
                }
            })
        }
    },
    async mounted() {
        await this.getDairyData()
    }
}
</script>

<style lang="scss" scoped>
.card {
    color: #36343c;
    background-color: #fff;
    width: 90%;
    height: 30rem;
    margin: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, .2), 0 0.6rem 2rem 0 rgba(0, 0, 0, .19);

    .card-word {
        clear: both;
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        padding-top: 2rem;

        .card-word-left {
            width: 25rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .u-pic {
                display: block;
                width: 3rem;
                height: 3rem;
                // 减裁掉多余部分,不拉伸不失真
                object-fit: cover;
                border-radius: 50%;
            }

            .u-name {
                margin-left: 1.5rem;
                display: inline-block;
                font-weight: bold;
                font-size: 1.6热吗;
            }
        }

        .u-city {
            color: #36343c;
        }
    }

    .card-img {
        width: 90%;
        height: 90%;
        margin: 0 auto;

        p {
            margin-top: 1rem;
            font-size: 1.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        img {
            margin-top: 1rem;
            width: 100%;
            height: 70%;
            border-radius: 1rem;
            object-fit: cover;
        }
    }
}
</style>
